<template>
  <view
    v-show="visible"
    class="hb-flex hb-flex-col hb-gap-4 hb-overflow-hidden animate-fade-in hb-absolute hb-top-0 hb-right-0 hb-left-0 hb-z-50 hb-bg-white"
    :style="{
      height: `${scrollHeight}px`,
    }"
  >
    <!-- 使用循环生成骨架屏 -->
    <template v-for="(item, index) in Math.ceil(scrollHeight / 100)" :key="index">
      <!-- 左侧气泡（AI消息） -->
      <view v-if="index % 2 === 0" class="hb-flex hb-justify-start">
        <view style="width: 50%">
          <tm-skeleton-line :height="180"></tm-skeleton-line>
        </view>
      </view>

      <!-- 右侧气泡（用户消息） -->
      <view v-else class="hb-flex hb-justify-end">
        <view style="width: 50%">
          <tm-skeleton-line :height="80"></tm-skeleton-line>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  /**
   * 聊天骨架屏组件
   * 用于显示聊天记录加载中的骨架效果
   */

  defineProps({
    // 是否可见
    visible: {
      type: Boolean,
      default: false,
    },
    // 滚动区域高度，用于计算骨架条数量
    scrollHeight: {
      type: Number,
      default: 600,
    },
  });
</script>

<style scoped>
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>
